<template>
  <div>
    <div class="top">
      <van-nav-bar
        title="详情"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      >
        <template #right>
          <van-popover
            v-model:show="showPopover"
            theme="dark"
            :actions="actions"
            placement="bottom-end"
            @select="onSelect"
          >
            <template #reference>
              <van-icon name="weapp-nav" size="18" />
            </template>
          </van-popover>
          <van-share-sheet
            v-model:show="showShare"
            title="立即分享给好友"
            :options="options"
          />
        </template>
      </van-nav-bar>
    </div>
    <div class="swipe">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item
          v-for="image in images"
          :key="image"
          style="height: 400px"
          @click="imgShow"
        >
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
      <div class="video" @click="show = true">
        <van-icon name="play-circle-o" style="color: red; margin-right: 10px" />
        <span>00'55'</span>
        <van-image-preview v-model:show="show" :images="images">
          <template #image="{ src }">
            <video style="width: 100%" controls label="视频">
              <source
                src="https://jvod.300hu.com/vod/product/b1024a62-8c46-464c-8ec7-f57d26cceb38/42f70c8e8bbb442e986874ec556fc882.mp4"
              />
              <span></span>
            </video>
          </template>
        </van-image-preview>
      </div>
    </div>
    <p class="p1">￥{{ obj.originprice }}</p>
    <p>
      <span>自营</span>
      <span>{{ obj.proname }}</span>
    </p>
    <van-action-bar>
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        :badge="badge"
        @click="goCart"
      />
      <van-action-bar-button type="warning" text="加入购物车" @click="addCart" />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script>
import { detailList } from "../service/pro.js";
import { addCartData } from "../service/cart.js";
import { showImagePreview } from "vant"; // 图片预览

export default {
  data() {
    return {
      show: false,
      badge:null,  // 加入购物车的数量
      images: [], // 图片
      obj: {},  // 存储当前的商品信息
      showPopover: false, // 气泡弹出框
      showShare: false, // 分享面板
      actions: [
        { text: "首页", icon: "wap-home-o", path: "/home" },
        { text: "购物车", icon: "shopping-cart-o", path: "/login" },
        { text: "分享", icon: "share-o", path: "" },
      ],
      options: [  // 分享
        [
          { name: "微信", icon: "wechat" },
          { name: "朋友圈", icon: "wechat-moments" },
          { name: "微博", icon: "weibo" },
          { name: "QQ", icon: "qq" },
        ],
        [
          { name: "复制链接", icon: "link" },
          { name: "分享海报", icon: "poster" },
          { name: "二维码", icon: "qrcode" },
          { name: "小程序码", icon: "weapp-qrcode" },
        ],
      ],
      form:{
        userid:'',  // 用户id
        proid:"",  // 商品id
        num:"",   // 加入购物车的数量
      }
    };
  },
  created() {
    this.detailData();
  },
  methods: {
    detailData() {
      let getId = this.$route.query;
      console.log(getId);
      detailList(getId.id).then((res) => {
        console.log(res.data);
        if (res.data.code === "200") {

          this.images = [
            res.data.data.img1,
            res.data.data.img2,
            res.data.data.img3,
            res.data.data.img4,
          ];
          this.obj = res.data.data;
          console.log(this.obj);
        }
      });
    },
    onClickLeft() {
      history.back();
    },
    imgShow() {
      showImagePreview(this.images);
    },
    goCart() {
      this.$router.push("/cart");
    },
    onSelect(action) {
      this.$router.push(action.path);
      if (action.path === '') {
        this.showShare = true;
      }
    },
    addCart(){
      this.badge++;
      let id = this.$route.query.id;
      // console.log(id);
      addCartData({userid:this.$store.state.userInfo.data.userid,proid:id,num:""+this.badge}).then((res)=>{
        console.log(res.data);
      })
    },
   
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
img {
  width: 100%;
  height: 100%;
  display: block;
}
.swipe {
  position: relative;
}
.swipe > .video {
  width: 100px;
  height: 45px;
  background: #f6f6f6;
  border-radius: 20px;
  text-align: center;
  line-height: 45px;
  font-size: 30px;
  position: absolute;
  top: 320px;
  left: 42%;
}
.video > span {
  font-size: 18px;
}
p {
  padding-left: 20px;
  font-size: 20px;
  line-height: 26px;
  font-weight: bold;
}
.p1 {
  line-height: 50px;
  color: red;
}
p > span:first-child {
  width: 30px;
  background: red;
  color: white;
  font-size: 16px;
  padding: 2px 4px;
  margin-right: 10px;
}
</style>
